<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main-wrap">
      <div class="main" :id="id">

      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
  export default {
    components: {
      chartTitle
    },
    name: 'chart-spacial-group-pie',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      color: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#FF6600', '#F34139', '#FFCC00']
        }
      },
      inColor: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#FF6600']
        }
      },
      outColor: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#A3D804', '#269A99', '#5B8FF9', '#FF9D4D', '#F34139', '#FFCC00']
        }
      },
      data: {
        type: Object,
        default: () => {
          return {}
        }
      },
      showLegend: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        minAngle: 45,
        center: ['28%', '50%'],
        inPieTotal: 100,
        OutPieTotal: 100,
        // dataMap: {}
      }
    },
    computed: {
      id: function() {
        return `main-${Math.random()}`
      },
      dataMap: function() {
        let obj = {}
        let inPieTotal = 0
        let outPieTotal = 0
        // 先计算总数
        // 内圆
        Object.keys(this.data).forEach((key, index) => {
          inPieTotal += this.data[key].total || 0
          // 外圆
          this.data[key].children.map(item => {
            outPieTotal += item.value || 0
          })
        })
        // 计算每个值的百分比
        Object.keys(this.data).forEach((key, index) => {
          obj[key] = {
            value: 0,
            color: this.inColor[index]
          }
          if (inPieTotal !== 0) {
            obj[key].value = (this.data[key].total / inPieTotal * 100).toFixed(2)
          }
          // 设置外圆
          this.data[key].children.map((item, count) => {
            // outColor[count + item.children.length * index]
            const nameKey = item.name
            obj[nameKey] = {
              value: 0,
              color: this.outColor[count + this.data[key].children.length * index]
            }
            if (outPieTotal !== 0) {
              obj[nameKey].value = (item.value / outPieTotal * 100).toFixed(2)
            }
          })
        })
        return obj
      }
    },
    mounted() {
      setTimeout(() => {
        this.onInit()
      }, 3500)
    },
    updated() {
      setTimeout(() => {
        this.onInit()
      }, 1000)
    },
    methods: {
      onInit() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;



        const inPie = {
          // name: '整体分类',
          type: 'pie',
          radius: [0, '35%'],
          center: this.center,
          minAngle: 0,
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              // color: (params) => {
              //   return this.inColor[params.dataIndex];
              // },
            },
          },

          selectedMode: 'single',
          data: [],
        }
        const outPie = {
          type: 'pie',
          radius: ['60%', '45%'],
          center: this.center,
          minAngle: 0,
          itemStyle: {
            normal: {
              // color: (params) => {
              //   console.log(params)
              //   return this.dataMap[params.data.mapKey].color;
              // },
            },
          },
          label: {
            show: false
          },
          data: [],
        }
        let inPieTotal = 0
        let OutPieTotal = 0
        // 配置option
        Object.keys(this.data).forEach((key, index) => {
          // 设置内圆
          inPie.data.push({
            name: key,
            value: this.data[key].total,
            mapKey: key
          })
          inPieTotal += this.data[key].total
          // 设置外圆
          this.data[key].children.map(item => {
            let obj = {
              name: item.name,
              value: item.value,
              type: item.name,
              mapKey: key + item.name
            }
            OutPieTotal += item.value
            outPie.data.push(obj)
          })
        })

        option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
          tooltip: {
            formatter: (param) => {
              return param.data.name + ': ' + this.dataMap[param.data.name].value + '%';
            },
          },
          color: this.color,
          legend: {
            show: !this.showLegend,
            selectedMode: false,
            orient: 'vertical',
            top: 'center',
            // type: 'scroll',
            left: '36%',
            itemGap: autoSize(26),
            pageTextStyle: {
              color: '#fff'
            },
            textStyle: {
              fontSize: autoSize(14),
              // color: '#',
              rich: {
                a: {
                  fontSize: autoSize(14),
                  color: '#',
                },
                value: {
                  fontSize: autoSize(14),
                  color: '#fff'
                }
              },
            },
            itemWidth: 13,
            itemHeight: 13,
            icon: 'roundRect',
            formatter: params => {
              const data = this.dataMap[params]
              // return `{a|${params}}{value| / ${ratio || 0}%}`
              return `{a|${params}}{value| / ${data.value}%}`
            },
          },

          series: [
            // 圆心
            {
              radius: ['0', '12%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              z: 5,
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 30
              },
              data: [{
                value: 0
              }],
            },
            // 圆心外圈
            {
              radius: ['20%', '19%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
            // 外圈
            {
              radius: ['70%', '69%'],
              center: this.center,
              type: 'pie',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                color: '#00CBFF',
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
            inPie,
            outPie,
          ],
        };
        myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }

  #container {
    width: 100%;
    height: 30.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    // border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main-wrap{
      flex: 1;
      height: 100%;
    }
    .main {
      height: 100%;
      flex: 1;
    }
  }
</style>
